<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <h1>The Goods Page</h1>
        <table>
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>remark</th>
                    <th>createdTime</th>
                </tr>
            </thead>
            <tbody>
                <tr><td colspan="4">Data is loading ....</td></tr>
            </tbody>
        </table>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function (){
            let url="goods/doFindGoods"
            $.getJSON(url,function (result){
                console.log(result);
                doHandleQueryResponseResult(result);
            })
        })
        function doHandleQueryResponseResult(result){
            //1.获取tbody对象，并清空原有内容
            let tBody=$("tbody");//等效于document.querySelector("tbody");
            tBody.empty();//等效于innerHTML="";
            //2.迭代result并将其内容追加到tbody中
            result.forEach(function (item){
                /*
                let tr=$("<tr></tr>");
                tr.append(`<td>${item.id}</td>
                            <td>${item.name}</td>
                            <td>${item.remark}</td>
                            <td>${item.createdTime}
                            </td>`);
                tBody.append(tr);
                 */
                tBody.append(`<tr>
                                <td>${item.id}</td>
                                <td>${item.name}</td>
                                <td>${item.remark}</td>
                                <td>${item.creationTime}</td>
                            </tr>`)
            })
        }
    </script>

</body>
</html>